<!-- Navigation -->
{% if page.nav-style == "invert" or page.header-style == "text" %}
<nav class="navbar navbar-default navbar-custom navbar-fixed-top invert">
{% else %}
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
{% endif %}
	<div class="container-fluid">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header page-scroll">
			<button type="button" class="navbar-toggle">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="{{ site.baseurl }}/">{{ site.title }}</a>
		</div>

		<!-- Collect the nav links, forms, and other content for toggling -->
		<div id="blog_navbar">
			<div class="navbar-collapse">
				<ul class="nav navbar-nav navbar-right">
					<li>
						<a href="{{ site.baseurl }}/">Home</a>
					</li>
					{% for page in site.pages %}
					{% if page.title and page.hide-in-nav != true %}
					<li>
						<a href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
					</li>
					{% endif %}
					{% endfor %}
				</ul>
			</div>
		</div>
		<!-- /.navbar-collapse -->
	</div>
	<!-- /.container -->
</nav>
<script>
	// Drop Bootstarp low-performance Navbar
	// Use customize navbar with high-quality material design animation
	// in high-perf jank-free CSS3 implementation
	var $body   = document.body;
	var $toggle = document.querySelector('.navbar-toggle');
	var $navbar = document.querySelector('#blog_navbar');
	var $collapse = document.querySelector('.navbar-collapse');

	var __Nav__ = {
		close: function(){
			$navbar.className = " ";
			// wait until animation end.
			setTimeout(function(){
				// prevent frequently toggle
				if($navbar.className.indexOf('in') < 0) {
					$collapse.style.height = "0px"
				}
			},400)
		},
		open: function(){
			$collapse.style.height = "auto"
			$navbar.className += " in";
		}
	}

	// Bind Event
	$toggle.addEventListener('click', function(e){
		if ($navbar.className.indexOf('in') > 0) {
			__Nav__.close()
		}else{
			__Nav__.open()
		}
	})

	/**
	* Since Fastclick is used to delegate 'touchstart' globally
	* to hack 300ms delay in iOS by performing a fake 'click',
	* Using 'e.stopPropagation' to stop 'touchstart' event from 
	* $toggle/$collapse will break global delegation.
	* 
	* Instead, we use a 'e.target' filter to prevent handler
	* added to document close HuxNav.  
	* 
	* Also, we use 'click' instead of 'touchstart' as compromise
	*/
	document.addEventListener('click', function(e){
		if(e.target == $toggle) return;
		if(e.target.className == 'icon-bar') return;
		__Nav__.close();
	})
</script>
